<template>
  <div>
    <div v-for="item in ch" v-if="ch !== null" v-bind:key="item">
      <el-submenu :index="item.id" v-if="item.type === 'folder'" v-bind:key="item" :title="item.name">
        <template slot="title">
          <el-col span="20">
            <el-input v-if="item.isRenaming" v-model="newName" @keyup.enter.native="rename(item)" autofocus/>
            <div class="sign" v-else>
              <span class="icon iconfont" style="color: rgb(238, 153, 0)">&#xe616;</span>
              <span slot="title"
                    style="overflow: hidden;text-overflow: ellipsis;-o-text-overflow: ellipsis;white-space:nowrap;">{{item.name}}</span>
            </div>
          </el-col>
          <el-col span="4">
            <!--下拉-->
            <el-dropdown @command="fileOperator($event, item)" placement="bottom-start" style="z-index: 1000">
            <span class="el-dropdown-link">
              <i class="el-icon-arrow-down el-icon--right"/>
            </span>
              <el-dropdown-menu slot="dropdown">
                <el-dropdown-item command="新建" v-show="item.type==='folder'">新建
                  <el-dropdown placement="bottom-start" trigger="click" @command="newFileOperator(item, $event)">
                                  <span class="el-dropdown-link">
                                    <i class="el-icon-arrow-down el-icon--right"/>
                                  </span>
                    <el-dropdown-menu index="1">
                      <el-dropdown-item command="笔记">笔记</el-dropdown-item>
                      <el-dropdown-item command="Markdown">Markdown</el-dropdown-item>
                      <el-dropdown-item command="模板笔记">模板笔记</el-dropdown-item>
                      <el-dropdown-item command="脑图">脑图</el-dropdown-item>
                      <el-dropdown-item command="文件夹">文件夹</el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
                <el-dropdown-item command="上传" v-show="item.type==='folder'">
                  上传
                  <el-dropdown placement="bottom-start" trigger="click" :hide-on-click="true">
                              <span class="el-dropdown-link">
                                <i class="el-icon-arrow-down el-icon--right"/>
                              </span>
                    <el-dropdown-menu index="2">
                      <el-dropdown-item>
                        <el-upload action="">文件</el-upload>
                      </el-dropdown-item>
                      <el-dropdown-item>
                        <el-upload action="">文件夹</el-upload>
                      </el-dropdown-item>
                    </el-dropdown-menu>
                  </el-dropdown>
                </el-dropdown-item>
                <el-dropdown-item command="重命名" divided>重命名</el-dropdown-item>
                <el-dropdown-item command="移动到">移动到</el-dropdown-item>
                <el-dropdown-item command="复制">复制</el-dropdown-item>
                <el-dropdown-item command="粘贴" v-if="page.copyFile !== ''">粘贴</el-dropdown-item>
                <el-dropdown-item command="删除">删除</el-dropdown-item>
                <el-dropdown-item command="分享" divided>分享</el-dropdown-item>
                <el-dropdown-item command="阅读密码" divided>阅读密码</el-dropdown-item>
              </el-dropdown-menu>
            </el-dropdown>
          </el-col>
        </template>
        <my-tree :ch="item.childNodes" :page="page"></my-tree>
        <el-submenu index="new" v-show="item.isBuildFolder" v-bind:key="item">
          <template slot="title">
            <div class="sign">
              <span class="icon iconfont" style="color: rgb(238, 153, 0)">&#xe616;</span>
            </div>
            <el-input v-model="newFolderName" placeholder="新建文件夹" @keyup.enter.native="buildFolder(item)"
                      autofocus></el-input>
          </template>
        </el-submenu>
      </el-submenu>
      <!--      <el-menu-item v-bind:key="item" :index="item.id" v-else>-->
      <!--        <div class="sign">-->
      <!--          <i class="iconfont iconbiaoqian"></i>-->
      <!--          <span slot="title">{{item.name}}</span></div>-->
      <!--      </el-menu-item>-->
    </div>
  </div>
</template>

<script>
  export default {
    name: "myTree",
    props: {
      ch: {
        type: Array,
        default() {
          return [];
        }
      },
      page: {}
    },
    data() {
      return {
        newFolderName: '',
        isBuildFolder: false,
        newName: "",
      }
    },
    methods: {

      rename(item) {
        item.isRenaming = false;
        let path = item.path.split("/");
        let newPath = "";
        let oldPath = "";
        let folder = "";
        for (let i = 0; i < path.length - 1; i++) {
          folder += path[i];
          folder += "/";
        }
        newPath = folder + this.newName;
        oldPath = folder + path[path.length - 1];
        this.apis.renameFileOrFolder(oldPath, newPath, res => {
          this.page.showMessage(res);
          this.page.updateFileTree();
        })
      },

      fileOperator(command, item) {
        let path = item.path.split("/");
        switch (command) {
          case "新建":
            break;
          case "上传":
            break;
          case "重命名":
            this.newName = path[path.length - 1];
            item.isRenaming = true;
            console.log(this.newName);
            break;
          case "移动到":
            this.page.movePath = item.path;
            this.page.isMoving = true;
            break;
          case "复制":
            this.page.copyFile = item.path;
            break;
          case "粘贴":
            this.page.pasteFile(item.path);
            break;
          case "删除":
            this.apis.deleteFolderOrFile(item.path, res => {
              this.page.showMessage(res);
              this.page.updateFileTree();
            });
            break;
          default:
            this.willOpen();
            break;
        }
      },

      /**
       * 创建文件夹
       * @param item 文件夹项
       */
      buildFolder(item) {
        // 关闭新建文件夹事件
        item.isBuildFolder = false;
        if (this.newFolderName !== '')
          this.apis.createFolder(item.path + "/" + this.newFolderName, res => {
            this.page.showMessage(res);
            this.page.updateFileTree(); // 更新一下文件树
          });
        // 初始化新建文件夹名称
        this.newFolderName = '';
      },

      newFileOperator(item, command) {
        this.page.operateFolder = item.path;
        switch (command) {
          case "笔记":
            this.page.clearFileWindow(false);
            break;
          case "Markdown":
            this.page.clearFileWindow(true);
            break;
          case "模板笔记":
          case "脑图":
            this.willOpen();
            break;
          case "文件夹":
            this.page.$refs["fileNav"].open(item.path);
            item.isBuildFolder = true;
            this.isBuildFolder = true;
            break;
        }
      },
    }
  }
</script>

<style>

  .el-submenu__title {
    display: flex;
    align-items: center;
  }

  .el-menu-item.is-active {
    background-color: rgb(57, 141, 238);
  }

  .el-menu.demo-type {
    position: absolute;
    margin-right: 0;
  }

  .el-menu {
    position: relative;
    margin-left: 0;
    margin-top: 0;
    padding: 0;
  }

  #fileNav.el-menu {
    height: 100%;
  }

</style>
